<template>
  <div class="home" :style="{ background: 'url(' + personImg + ') no-repeat' }">
    <div class="back" @click="goPage('home')">返回</div>
    <div class="rule" @click="showRule = true">
      <img src="@/assets/img/ydyRuleIcon.png" />
    </div>
    <ul class="ydyBox" v-if="notToBetOn">
      <li
        class="item"
        v-for="(item, index) in movieList"
        :key="index"
        @click="changeIndex(item.value)"
        :style="{ background: 'url(' + ydy + ') no-repeat' }"
      >
        <div class="imgBox">
          <img :src="item.img" alt="" />
        </div>
        <div
          class="titleBox"
          :style="{ background: 'url(' + ydy2 + ') no-repeat' }"
        >
          <span>{{ item.text }}</span>
          <img
            v-if="activeIndex === item.value"
            src="@/assets/img/ydy4.png"
            alt=""
          />
          <img v-else src="@/assets/img/ydy3.png" alt="" />
        </div>
      </li>
    </ul>
    <div class="btn" v-if="notToBetOn">
      <md-button type="warning" round @click="submitBtn()">提交</md-button>
    </div>
    <div v-if="popupShow" class="ydyPopup">
      <div
        class="ydyPopup-main"
        :style="{ background: 'url(' + popupImg + ') no-repeat' }"
      >
        <p class="ydyPopup-title">您选择了电影《{{ popupContent.text }}》</p>
        <img :src="popupContent.img" alt="" />
        <div>
          <p
            :style="{ background: 'url(' + popupBtnBg + ') no-repeat' }"
            @click="reelectBtn"
          >
            重新选择
          </p>
          <P
            :style="{ background: 'url(' + popupBtnBg + ') no-repeat' }"
            @click="confirmBtn"
            >确定</P
          >
        </div>
      </div>
    </div>
    <div class="betting" v-if="!notToBetOn">
      <div v-if="step === 1">
        <img src="@/assets/img/ydycg.png" alt="" />
        <p>您已押"{{ changeText() }}"，坐等2月1日开奖</p>
      </div>
      <div v-if="step === 2">
        <img src="@/assets/img/ydycg.png" alt="" />
        <p>该活动已结束，坐等2月1日开奖</p>
      </div>
      <div v-if="step === 3">
        <div v-if="stepResult === 1">
          <img src="@/assets/img/ydycg.png" alt="" />
          <p>该活动已结束，坐等2月1日开奖</p>
        </div>
        <div v-if="stepResult === 4">
          <img src="@/assets/img/ydycg.png" alt="" />
          <p>您已押"{{ changeText() }}"，坐等2月1日开奖</p>
        </div>
        <img v-else-if="stepResult === 2" src="@/assets/img/ydy5.png" alt="" />
        <img v-else-if="stepResult === 3" src="@/assets/img/ydy6.png" alt="" />
      </div>
    </div>
    <md-landscape v-model="showRule" :mask-closable="true">
      <img src="@/assets/img/ydyRule.png" />
    </md-landscape>
  </div>
</template>

<script>
import wx from "weixin-jsapi";
import personImg from "@/assets/img/ydybg.jpg";
import popupImg from "@/assets/img/ydybg1.png";
import popupBtnBg from "@/assets/img/ydyBtnBg.png";
import ydy from "@/assets/img/ydy1.png";
import ydy2 from "@/assets/img/ydy2.png";
import r3 from "@/assets/img/ranking3.png";
import movieList from "@/tool/movieList";
import { Popup, Landscape, Button, Toast, PopupTitleBar } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Popup.name]: Popup,
    [Landscape.name]: Landscape,
    [Button.name]: Button,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data() {
    return {
      activeIndex: 0,
      movieList: movieList,
      personImg: personImg,
      ydy: ydy,
      ydy2: ydy2,
      r3: r3,
      popupImg: popupImg,
      popupBtnBg: popupBtnBg,
      popupShow: false,
      popupContent: {},
      notToBetOn: true,
      showRule: false,
      step: 1, // '1为已押，2为时间已过，3为开奖'
      stepResult: 1 // '1为时间未到，2为成功，3为失败'
    };
  },
  methods: {
    changeText() {
      let item = this.movieList.find(item => {
        if (item.value == this.info.bet_num) {
          return item;
        }
      });
      return item.text;
    },
    changeIndex(value) {
      this.activeIndex = value;
    },
    reelectBtn() {
      this.popupShow = false;
    },
    confirmBtn() {
      this.$ajax
        .post(this.$api.getBet, { bet: this.activeIndex }, true)
        .then(() => {
          this.$message.success("押宝成功");
          this.getInfo();
        })
        .catch(err => {
          Toast.failed(err, 3000, true);
        });
    },
    submitBtn() {
      if (this.activeIndex !== 0) {
        for (let item of this.movieList) {
          if (item.value === this.activeIndex) {
            this.popupContent = item;
          }
        }
        this.popupShow = true;
      }
    },
    getInfo() {
      this.$ajax
        .post(this.$api.getInfo, false, true)
        .then((res) => {
          this.$store.dispatch("changeInfo", res);
          this.popupShow = false;
          this.notToBetOn = false;
          this.step = 1;
        })
        .catch(err => {
          Toast.failed(err, 3000, true);
        });
    },
    getBetResult() {
      this.$ajax
        .post(this.$api.betResult, false, true)
        .then(res => {
          if (res.is_bet) {
            this.stepResult = 2;
          } else {
            this.stepResult = 3;
          }
        })
        .catch(err => {
          if (this.info.bet === 1) {
            this.stepResult = 4;
          } else {
            this.stepResult = 1;
          }
          Toast.failed(err, 3000, true);
        });
    },
    goPage(routeName) {
      this.$router.push({ name: routeName });
    },
    getConfig() {
      wx.ready(() => {
        this.wxShare();
      });
    },
    wxShare() {
      let self = this;
      const share_title = "答题押电影，豪礼领不停！";
      const share_desc =
        "是时候展现你的票房预测能力了，签到再答题，福鼠天天送，瓜分新年豪礼！";
      const share_link = "http://gift.hrycf.com";
      const share_img = "https://test.hrycf.com/hry/gift/cj.png";
      wx.showOptionMenu();
      wx.onMenuShareTimeline({
        title: share_title, // 分享标题
        link: share_link, // 分享链接
        imgUrl: share_img
      });
      wx.onMenuShareAppMessage({
        title: share_title, // 分享标题
        desc: share_desc, // 分享描述
        link: share_link, // 分享链接
        imgUrl: share_img,
        success: function() {
          self.getOneOpportunity();
        }
      });
    }
  },
  mounted() {
    this.getConfig();
  },
  created() {
    let state = JSON.parse(window.sessionStorage.getItem("state"));
    var timestamp = new Date().getTime();
    if (timestamp < 1579881599000) {
      if (state.info.bet === 1) {
        this.notToBetOn = false;
        this.step = 1;
      }
    } else if (timestamp < 1580522400000) {
      if (state.info.bet === 1) {
        this.notToBetOn = false;
        this.step = 1;
      } else {
        this.notToBetOn = false;
        this.step = 2;
      }
    } else {
      this.notToBetOn = false;
      this.step = 3;
      this.getBetResult();
    }
  },
  computed: {
    info() {
      return this.$store.state.info;
    }
  }
};
</script>

<style scoped lang="less">
.home {
  height: 100%;
  width: 100%;
  position: relative;
  background-size: 100%, 100% !important;
  @media (max-width: 320px) {
    padding: 30px 0 0 0;
  }
  .back {
    position: fixed;
    padding: 20px 50px;
    top: 20px;
    left: 30px;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    z-index: 12;
  }
  .rule {
    position: fixed;
    top: 0;
    right: 13px;
    font-weight: bold;
    z-index: 12;
    width: 100px;
    img {
      width: 100%;
    }
  }
  .ydyBox {
    position: absolute;
    height: 60%;
    width: 100%;
    overflow-y: auto;
    bottom: 140px;
    padding: 0 70px;
    .flex_content ();
    .flex_justify_space();
    @media (max-width: 360px) {
      padding: 0 50px;
    }
    flex-wrap: wrap;
    .item {
      width: 296px;
      height: 380px;
      background-size: 100%, 100% !important;
      position: relative;
      margin-bottom: 40px;
      .imgBox {
        text-align: center;
        margin-top: 37px;
        img {
          width: 192px;
          height: 269px;
        }
      }
      .titleBox {
        position: absolute;
        width: 343px;
        height: 92px;
        bottom: 0;
        left: -7px;
        background-size: 100%, 100% !important;
        span {
          display: inline-block;
          text-align: center;
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: 500;
          width: 224px;
          color: rgba(255, 255, 255, 1);
          line-height: 16px;
          margin: 32px 0 0 40px;
        }
        img {
          position: absolute;
          right: 12px;
          width: 62px;
          top: 9px;
        }
      }
    }
  }
  .btn {
    position: absolute;
    bottom: 20px;
    width: 60%;
    left: 50%;
    transform: translate(-50%);
  }
  .ydyPopup {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 15;
    .ydyPopup-main {
      width: 670px;
      height: 877px;
      padding-top: 110px;
      box-sizing: border-box;
      background-size: 100%, 100% !important;
      position: absolute;
      left: 50%;
      top: 50%;
      text-align: center;
      margin-left: -335px;
      margin-top: -438px;
      .ydyPopup-title {
        color: #92282a;
        font-size: 30px;
      }
      img {
        width: 273px;
        height: 381px;
        margin: 77px auto 83px;
      }
      div {
        .flex_content();
        .flex_justify_center();
        p {
          background-size: 100%, 100% !important;
          width: 226px;
          height: 91px;
          line-height: 91px;
          font-size: 38px;
          font-weight: 500;
        }
        p:first-child {
          color: #c40705;
        }
        p:last-child {
          color: #557ffc;
          margin-left: 44px;
        }
      }
    }
  }
  .betting {
    width: 100%;
    text-align: center;
    padding-top: 440px;
    position: relative;
    img {
      width: 544px;
      height: 701px;
    }
    p {
      font-size: 22px;
      color: #ffffff;
      position: relative;
      top: -90px;
    }
  }
}
</style>
